﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Fx/Fx.Reveal</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Fx-Reveal">Fx.Reveal</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#Fx-Reveal:dissolve">dissolve</a></div>
			<div class="menu-item"><a href="#Fx-Reveal:reveal">reveal</a></div>
			<div class="menu-item"><a href="#Fx-Reveal:toggle">toggle</a></div>
			<h4 class="menu-item"><a href="#Element-Properties">Element.Properties</a></h4>
			<div class="menu-item"><a href="#Element-Properties:reveal">reveal</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:reveal">reveal</a></div>
			<div class="menu-item"><a href="#Element:dissolve">dissolve</a></div>
			<div class="menu-item"><a href="#Element:nix">nix</a></div>
			<div class="menu-item"><a href="#Element:wink">wink</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Fx-Reveal"><a href="#Fx-Reveal">Class: Fx.Reveal</a></h1>

<p class="description">Transitions the height, opacity, padding, and margin (but not border) from and to their current height from and to zero, then sets display to none or block and resets the height, opacity, etc. back to their original values.</p>

<h3>Tutorial/Demo</h3>

<ul>
<li><a href="http://www.clientcide.com/wiki/cnet-libraries/05-fx/02-fx.reveal">Online Tutorial/Demo</a></li>
</ul>
<h3>Extends</h3>

<ul>
<li><a href="../../core/Fx/Fx.Morph.html">Fx.Morph</a></li>
</ul>
<h2><a href="#">Fx.Reveal Method: constructor</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript"><span class="kw2">new</span> Fx.<span class="me1">Reveal</span><span class="br0">(</span>element<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>element - (<em>mixed</em>) A string of the id for an Element or an Element reference to reveal or hide.</li>
<li>options  - (<em>object</em>, optional) a key/value object of options</li>
</ol>
<h3>Options</h3>

<ul>
<li>all the options passed along to <a href="../../core/Fx/Fx.Morph.html">Fx.Morph</a> (transition, duration, etc.); (optional); PLUS</li>
<li>styles - (<em>array</em>) css properties to transition in addition to width/height;  defaults to <em>['padding','border','margin']</em>
</li>
<li>transitionOpacity - (<em>boolean</em>) toggles the use of transitioning the opacity during the Reveal/Dissolve effect (this feature is not currently supported in IE)</li>
<li>mode - (<em>string</em>) "vertical", "horizontal", or "both" to describe how the element should slide in; defaults to <em>"vertical"</em>
</li>
<li>heightOverride - (<em>number</em>) height to open to; overrides the default offsetHeight</li>
<li>widthOverride - (<em>number</em>) width to open to; overrides the default offsetWidth</li>
<li>display - (<em>string</em>) the property for the display style when your reveal the element. Defaults to <em>block</em> but could be, for instance, <em>list-item</em>, <em>inline-block</em>, etc.</li>
<li>opacity - (<em>float</em>) the opacity value for fading in an element; defaults to <em>1</em> but can be set to a number between zero and one to have the element fade in to a partially transparent state.</li>
</ul>
<h3>Events</h3>

<ul>
<li>All the events found in <a href="../../core/Fx/Fx.Morph.html">Fx.Morph</a>, PLUS</li>
<li>show - (<em>function</em>) The function to apply when the element is displayed.</li>
<li>hide - (<em>function</em>) The function to apply when the element is hidden. NOTE: the <em>onComplete</em> event occurs when the effect is complete, but before the element is set to <em>display:none</em>.</li>
</ul>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) A new instance of <a href="#Fx-Reveal">Fx.Reveal</a>.</li>
</ul>
<h3>Example</h3>

<pre class="javascript"><span class="kw2">new</span> Fx.<span class="me1">Reveal</span><span class="br0">(</span>$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>, <span class="br0">{</span>duration: <span class="nu0">500</span>, mode: <span class="st0">'horizontal'</span><span class="br0">}</span><span class="br0">)</span>;
</pre>

<h2 id="Fx-Reveal:dissolve"><a href="#Fx-Reveal:dissolve">Fx.Reveal Method: dissolve</a></h2>

<p class="description">Transitions the height, opacity, padding, and margin (but not border) from their current height to zero, then sets display to none and resets the height, opacity, etc. back to their original values.</p>

<h3>Syntax</h3>

<pre class="javascript">myRevealFx.<span class="me1">dissolve</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This <a href="#Fx-Reveal">Fx.Reveal</a> instance.</li>
</ul>
<h3>Note</h3>

<ul>
<li>After the effect reveals the element, its display will be set block and its height or width to <em>auto</em> unless <em>heightOverride</em> and/or <em>widthOverride</em> (depending on the <em>mode</em> option) is specified.</li>
</ul>
<h2 id="Fx-Reveal:reveal"><a href="#Fx-Reveal:reveal">Fx.Reveal Method: reveal</a></h2>

<p class="description">Sets the display of the element to opacity: 0 and display: block, then transitions the height, opacity, padding, and margin (but not border) from zero to their proper height.</p>

<h3>Syntax</h3>

<pre class="javascript">myRevealFx.<span class="me1">reveal</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This <a href="#Fx-Reveal">Fx.Reveal</a> instance.</li>
</ul>
<h2 id="Fx-Reveal:toggle"><a href="#Fx-Reveal:toggle">Fx.Reveal Method: toggle</a></h2>

<p class="description">Toggles the element from shown to hidden.</p>

<h3>Syntax</h3>

<pre class="javascript">myRevealFx.<span class="me1">toggle</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This <a href="#Fx-Reveal">Fx.Reveal</a> instance.</li>
</ul>
<h1 id="Element-Properties"><a href="#Element-Properties">Object: Element.Properties</a></h1>

<p class="description">See <a href="../../core/Element/Element.html#Element-Properties">Element.Properties</a>.</p>

<h2 id="Element-Properties:reveal"><a href="#Element-Properties:reveal">Element Property: reveal</a></h2>

<h3 class="description">Setter</h3>

<p>Sets a default <a href="#Fx-Reveal">Fx.Reveal</a> instance for an Element.</p>

<h4>Syntax</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'reveal'</span><span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h4>Arguments</h4>

<ol>
<li>options - (<em>object</em>, optional) The <a href="#Fx-Reveal">Fx.Reveal</a> options.</li>
</ol>
<h4>Returns</h4>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h4>Examples</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'reveal'</span>, <span class="br0">{</span>duration: <span class="st0">'long'</span>, transition: <span class="st0">'bounce:out'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">reveal</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//show the element</span>
el.<span class="me1">dissolve</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//hide it</span>
</pre>

<h3>Getter</h3>

<p>Gets the default <a href="#Fx-Reveal">Fx.Reveal</a> instance for the Element.</p>

<h4>Syntax</h4>

<pre class="javascript">el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'reveal'</span><span class="br0">)</span>;
</pre>

<h4>Arguments</h4>

<ol>
<li>name - (<em>string</em>) - this should always be "reveal".</li>
</ol>
<h4>Returns</h4>

<ul>
<li>(<em>object</em>) The Element's internal <a href="#Fx-Reveal">Fx.Reveal</a> instance.</li>
</ul>
<h4>Examples</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'reveal'</span>, <span class="br0">{</span>duration: <span class="st0">'long'</span>, transition: <span class="st0">'bounce:out'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">reveal</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//show the element</span>
el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'reveal'</span><span class="br0">)</span>; <span class="co1">//The Fx.Reveal instance.</span>
</pre>

<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Adds <a href="#Fx-Reveal">Fx.Reveal</a> shortcuts to the <a href="../../core/Element/Element.html">Element</a> class.</p>

<h2 id="Element:reveal"><a href="#Element:reveal">Element Method: reveal</a></h2>

<p class="description">Retrieves the "build-in" instance of <a href="#Fx-Reveal">Fx.Reveal</a> and calls its <em>reveal</em> method.</p>

<h3>Syntax</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">reveal</span><span class="br0">(</span>options<span class="br0">)</span>;
</pre>

<h4>Arguments</h4>

<ol>
<li>options - (<em>object</em>, optional) The <a href="#Fx-Reveal">Fx.Reveal</a> options. If these are passed in, a new instance will be generated.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element</li>
</ul>
<h2 id="Element:dissolve"><a href="#Element:dissolve">Element Method: dissolve</a></h2>

<p class="description">Retrieves the "build-in"  instance of <a href="#Fx-Reveal">Fx.Reveal</a> and calls its <em>dissolve</em> method.</p>

<h3>Syntax</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">dissolve</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element</li>
</ul>
<h2 id="Element:nix"><a href="#Element:nix">Element Method: nix</a></h2>

<p class="description">Retrieves the "build-in" instance of <a href="#Fx-Reveal">Fx.Reveal</a> and calls its <em>dissolve</em> method, then either removes or destroys the element.</p>

<h3>Syntax</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">nix</span><span class="br0">(</span><span class="br0">[</span>options, destroy<span class="br0">]</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">nix</span><span class="br0">(</span><span class="br0">[</span>destroy<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<p>Note that either or both of these may be specified and in any order.</p>

<ul>
<li>options - (<em>object</em>) The options object to pass to the "built-in" instance of Fx.Reveal.</li>
<li>destroy - (<em>boolean</em>) If (<em>true</em>) the element will be destroyed entirely after the effect (using <em>Element.destroy</em>), otherwise it will only be removed from the DOM (using <em>Element.erase</em>). Defaults to (<em>false</em> - i.e. erase).</li>
</ul>
<h3>Examples</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">nix</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span>; <span class="co1">//destroy</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">nix</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//erase</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">nix</span><span class="br0">(</span><span class="br0">{</span>duration: <span class="nu0">1000</span><span class="br0">}</span><span class="br0">)</span>; <span class="co1">//dissolve over 1 second, then erase</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">nix</span><span class="br0">(</span><span class="br0">{</span>duration: <span class="nu0">1000</span><span class="br0">}</span>, <span class="kw2">true</span><span class="br0">)</span>; <span class="co1">//dissolve over 1 second, then destroy</span>
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element</li>
</ul>
<h2 id="Element:wink"><a href="#Element:wink">Element Method: wink</a></h2>

<p class="description">Retrieves the "build-in" instance of <a href="#Fx-Reveal">Fx.Reveal</a> and calls its <em>reveal</em> method, then pauses the specified duration, and then calls its <em>dissolve</em> method.</p>

<h3>Syntax</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">wink</span><span class="br0">(</span><span class="br0">[</span>duration<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ul>
<li>duration - (<em>number</em>, optional) The duration that the element should remain visible before it hides again. Defaults to 2000 (ms).</li>
</ul>
<h3>Examples</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">wink</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//2 second pause</span>
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">wink</span><span class="br0">(</span><span class="nu0">500</span><span class="br0">)</span>; <span class="co1">//.5 second pause</span>
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element</li>
</ul>

    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
